<template>
  <div class="game-view">
    <Tabs @on-click="selectGame" v-if="gameList.length > 0">
      <TabPane :label="item.name" v-for="item in gameList" :key="item.id">
        <Row>
          <Col span="24">
            <Row>
              <Col span="24">
                <Table border :loading="loading" :columns="tbCol" :data="list" size="small">
                  <template slot-scope="{ row, index }" slot="account">
                    {{row.account}}(等级{{row.level}})
                  </template>
                  <template slot-scope="{ row, index }" slot="price">
                    {{row.price | moneyFormat}}元
                  </template>
                  <template slot-scope="{ row, index }" slot="s1">
                    {{row.s1 | moneyFormat}}
                  </template>
                  <template slot-scope="{ row, index }" slot="s2">
                    {{row.s2 | moneyFormat}}
                  </template>
                  <template slot-scope="{ row, index }" slot="img">
                    <img class="icon" :src="row.img"/>
                  </template>
                  <template slot-scope="{ row, index }" slot="recommend">
                    <Tag v-if="row.topLevel" color="blue">顶级账号</Tag>
                    <Tag v-if="row.up" color="green">置顶强推</Tag>
                  </template>
                  <template slot-scope="{ row, index }" slot="tag">
                    <Tag v-for="item in row.tagInfoList" :key="item.id">{{ item.name }}</Tag>
                  </template>
                </Table>
              </Col>
            </Row>

            <div class="clear-10"></div>
            <Row>
              <Col span="24">
                <Page :total="total" :page-size="pageSize" show-total @on-change="pageChange" />
              </Col>
            </Row>
          </Col>
        </Row>
      </TabPane>
    </Tabs>

    <div v-else>
      空空如也~
    </div>
  </div>
</template>

<script>
import Editor from '_c/editor'
import Core from 'core/core'

export default {
  components: {
    Editor
  },
  data() {
    return {
      Core: Core,
      loading: true,
      tbCol: [
        {title: 'ID', key: 'id', width: '80px'},
        {title: '账号', slot: 'account', width: '150px'},
        {title: '标题', key: 'title', width: '300px'},
        {title: '价格', slot: 'price', width: '100px'},
        {title: '图片', slot: 'img', width: '180px'},
        {title: '推荐', slot: 'recommend', width: '150px'},
        {title: '标签', slot: 'tag', width: '200px'},
        {title: '热度', key: 'hot', width: '80px'},
        {title: '魅力', slot: 's1', width: '80px'},
        {title: '功力', slot: 's2', width: '80px'},
      ],
      list: [],
      currentPage: 1,
      total: 0,
      pageSize: 10,

      gameId: 0,
      gameList: [],
      tagList: []
    }
  },
  mounted() {
    this.getGameList()
  },
  methods: {
    getGameList() {
      Core.Api.Game.list({})
        .then(res => {
          this.gameList = res.list
          if (this.gameList.length > 0) {
            this.gameId = this.gameList[0].id;
            this.getGameAccountList(this.gameId)
            this.getGameListWithTag(this.gameId)
          }
        })
    },
    getGameListWithTag(gameId) {
      Core.Api.GameTag.listWithTag({gameId: gameId})
        .then(res => {
          this.tagList = res.list
        })
    },
    getGameAccountList(gameId) {
      this.loading = true
      Core.Api.GameAccount.list({gameId: gameId, status: 2, page: this.currentPage})
        .then(res => {
          this.loading = false
          this.list = res.list
          this.total = res.count
        })
    },
    pageChange (page) {
      this.currentPage = page
      this.getGameAccountList(this.accountForm.gameId)
    },
    selectGame(idx) {
      this.gameId = this.gameList[idx].id
      this.getGameAccountList(this.gameId)
      this.getGameListWithTag(this.gameId)
    }
  }
}
</script>

<style lang="less" scoped>
.game-view {
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  position: relative;
  padding: 16px;

  .icon {
    width: 140px;
    padding: 10px 0;
  }
}

.demo-upload-list {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
